<template>
	<scroll-view class="content" scroll-y>
		<view class="title">{{ newBody.wtitle||newBody.title }}</view>
		<view class="info">
			<view class="i-agent">{{ newBody.telegraph_type||newBody.mediaName }}&nbsp;·&nbsp; </view>
			<view class="i-date">{{ newBody.showTime||dateFormat(newBody.ctimestamp) }}</view>
		</view>
		<image v-if="newBody.image" :src="newBody.image" lazy-load style="width: 100%;"></image>
		<view class="content">{{ newBody.wcontent||newBody.summary }}</view>
		<view class="ops">
			<u-input placeholder="文明用语，和气交流"></u-input>
			<u-icon name="chat" size="30"></u-icon>
			<u-icon name="star" size="30"></u-icon>
			<u-icon name="thumb-up" size="30"></u-icon>
			<u-icon name="photo" size="30"></u-icon>
		</view>
	</scroll-view>
		
</template>

<script>
import {dateDetailFormater} from '../../utils/dateFormat'
	export default{
		data() {
			return {
				newBody:{}
			};
		},
		computed:{
			dateFormat(){
				return (date)=>dateDetailFormater(new Date(date))
			}
		},
		onLoad(options) {
			const {newObj}=options
			console.log(JSON.parse(newObj));
			this.newBody = JSON.parse(newObj)
		},
	}
</script>

<style lang="scss">
.content{
	padding-bottom: 100rpx;
}
.title{
	font-size: 60rpx;
	font-weight: bold;
	margin-bottom: 60rpx;
}
.info{
	display: flex;
	color: #d5d5d5;
	font-size: 26rpx;
	margin-bottom: 60rpx;
}
.content{
	font-size: 40rpx;
}
.ops{
	z-index: 1000;
	display: grid;
	grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
	width: 100vw;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 10rpx 0rpx 40rpx 20rpx;
	.u-input{
		margin-right: 20rpx;
	}
}
</style>
